<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>APP后台管理系统</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <i th:replace="~{common :: baseUrl}"></i>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<!--    头部-->
    <i th:replace="~{dev/app/common :: head}"></i>
<!--左侧-->
    <i th:replace="~{dev/app/common :: left}"></i>


    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div  style=" height: 500px; width: 100%" id="div"></div>
    </div>

<!--底部-->
    <i th:replace="~{dev/app/common :: footer}"></i>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/echarts.js}"></script>
<script>



    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
        var $ = layui.$;

        var softwareNameArrays = [];
        var downloadArrays = [];

        $.getJSON(
            baseUrl+"dev/app/Order-by-downloads",
            null,
            function (result) {
                if (result.code==0){
                    var jsonArrays = result.data;

                    for (var i =0 ;i<jsonArrays.length;i++){
                        softwareNameArrays.push(jsonArrays[i].softwareName)
                        downloadArrays.push(jsonArrays[i].downloads)
                    }

                    option = {
                        color: ['#3398DB'],
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : softwareNameArrays,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'直接访问',
                                type:'bar',
                                barWidth: '60%',
                                data:downloadArrays
                            }
                        ]
                    };
                    var divEchart = echarts.init(document.getElementById("div"));
                    divEchart.setOption(option);
                }
            }
        )

    });











</script>
</body>
</html>